@import "variables.scss";
.index-swiper {
    --margin-left:10.3125%;
    width: 100%;
    height: 100vh;
    background: #000;
    .swiper-slide {
        background: #000;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        .txt {
            width:370px;
            box-sizing: border-box;
            line-height: 1.4;
            height: 2.8em;
            font-size:var(--f-size-18);
            z-index: $base-z+30;
            margin-left: var(--margin-left);
        }
        .color-circle{
            margin-top: -5%;
        }
        .slogan{
            width: 1460px;
            position: absolute;left: 50%;top: 50%;transform: translate(-47%,-35%) scale(3);
            z-index: $base-z+25;
            font-size: var(--f-size-72);
            line-height: 1.2;
            opacity: 0;
            span{display: block;}
            .cn{font-family: "AlibabaPuHuiTiH"}
            .en{        
                font-weight: 300;
                font-size: 0.45em;
                margin-top: 10px;
            }
        }
        .print-cursor{
            opacity: 0;
        }
        .partners-group{
            width: 100vw;
            min-width: 1600px;
            @include align-center;
        }
        &.scenes-item3 {
            .txt{
                width:280px;height: 5.6em;
            }
            background-image: url(../images/silhouette.gif);
        }
        &.scenes-item5 {
            background-image: url(../images/scenes-bg5.jpg);
            .txt{
                position: absolute;
                left: 50%;
                height: auto;
                bottom: 19.92%;
                margin-left: 0;
                p{
                    &:nth-child(2){
                        height: 4.2em;
                    }
                }
            }
        }
        &.scenes-item6 {
            background-color: #000;
            .detail-con {              
                position: relative;
                text-align: center;
                z-index: $base-z+10;
                color: #ffdc97;
                font-size:var(--f-size-18);
                p {
                    padding-top: 20px;line-height: 1.8;
                }
            }
        }
        &.scenes-item7 {
            background-image: url(../images/scenes-bg7.jpg); 
            justify-content: flex-start;
            .inner-con {
                width: 370px;
                margin-left: var(--margin-left);
                h3 {
                    font-family: "AlibabaPuHuiTiH";
                    font-size:var(--f-size-72);
                    line-height: 1.4;
                    position: relative;
                    padding-bottom: 50px;
                    &:after {
                        content: '';
                        width: 178px;
                        height: 28px;
                        background: #43c0c5;
                        position: absolute;
                        left: 0;
                        bottom: 0;
                    }
                }
                .info {
                    padding: 40px 0 20px 0;font-size: var(--f-size-18);
                }
            }
            .person {
                right:4.5%;bottom: 0;
            }
        }
        &.swiper-slide-active{
            
        }
    }
}

.scenes-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: $base-z+2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    @each $name in scenes-bg2,scenes-bg4,scenes-bg5,scenes-bg6{
        &.#{$name} {
            background-image: url(../images/#{$name}.jpg);
        }
    }
    &.scenes-bg2{     
        transition: filter 1.5s linear;
        &.enter{
            animation: filterEnter 1.5s linear;
        }
        &.outer{
            filter: blur(10px);
        }
    }
    &.scenes2-hills{
        background-image: url(../images/scenes2-hills.png);
        transform-origin: bottom center;
        background-position: bottom center;
    }
    &.scenes-bg5s {
        background-image: url(../images/scenes-bg5s.png);
    }
    &.scenes-bg6{
        animation: breatheFlash 7s linear infinite;
    }
    &.inner-con {
        background-color: #000;z-index: $base-z+3
    }
}

@keyframes filterEnter {
    0%{
        filter: blur(10px)
    }
    100%{
        filter: blur(0)
    }
}
@keyframes filterOuter {
    0%{
        filter: blur(0)
    }
    100%{
        filter: blur(10px)
    }
}

@keyframes breatheFlash {
    0% {
        opacity: 0.125;
        transform: scale(1.08);
    }
    30% {
        opacity: 0.7;
        transform: scale(1.03);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
    60% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 0.7;
        transform: scale(1.03);
    }
    100% {
        opacity: 0.125;
        transform: scale(1.08);
    }
}

.breatheFlash{
    animation: breatheFlash 5s linear infinite;
}

.color-circle{
    width: 44.79vw;max-width: 860px;
    img{
        animation: rotate 3s linear infinite;
    }
}

.person {
    width: 47.083%;
    position: absolute;
    transform-origin: center center;
    >div {
        width: 100%;position: absolute;left: 0;top: 0;
    }
    .person-front {
        z-index: $base-z+10; 
    }
    .FT-circle {
        z-index: $base-z+6;
        &:after {
            content: '';
            position: absolute;
            left: 2%;
            right: 2%;
            bottom: 2%;
            top: 2%;
            background: #fbd78e;
            border-radius: 50%;
            background-image: -webkit-radial-gradient(center center, circle contain, #fbd78e 0%, #c8cc9b 25%, #fbd78e 40%, #c8cc9b 80%, transparent 100%);
            box-shadow: 0 0 50px rgba(251, 220, 153, .8);
            opacity: .4;
            transform: scale(1);
            animation: FTCircleAni 5s linear infinite;
            -webkit-animation: FTCircleAni 5s linear infinite
        }
    }
    .person-back {
        z-index: $base-z+1;
    }
}

.partners-scrolling{
    width: 200%;
    display: flex;
    position: relative;
    transform: translate(-50%,0);
    .scrolling-item{
        width:50%;opacity: 0.5;
    }
}

@media screen and (max-width:1920px) {
    .index-swiper{
        .swiper-slide{
            .slogan{
                width: 1200px;
            }
        }
    }
}

@media screen and (max-width:1460px){
    .color-circle{
        width: 480px;
    }
    .index-swiper{
        .swiper-slide{
            .slogan{
                width:75%;
            }
            &.scenes-item6{
                .detail-con{
                    max-width: 1200px;
                    padding: 0 25px;
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .color-circle{
        width: 430px;
    }
    .index-swiper { 
        --margin-left:20px;
        .swiper-slide {
            .txt {
                width:70%;
                max-width: 320px;
            }
            &.scenes-item3{
                justify-content: center;
                align-items: flex-start;
                .txt{
                    margin-top: 20vh;
                    margin-left: 10vw;
                }
            }
            &.scenes-item5{
                .txt{
                    bottom:auto;
                    top:15%;
                    left:calc((100vw - 320px) / 2);
                }
            }
            &.scenes-item6 {  
                .txt{
                    margin-top: -20vw;
                }           
                .detail-con {
                    max-width:88%;
                }
            }
            &.scenes-item7 {
                justify-content: center;
                .inner-con {
                    width: 50vw;
                    margin-left: 0;
                    margin-bottom:35vw;
                    h3 {
                        line-height: 1.2;
                        padding-bottom: 40px;
                        &:after {
                            width: 132px;
                            height: 22px;
                        }
                    }
                    .info {
                        padding: 20px 0 20px 0;
                    }
                }
                .person{
                    right: calc((100vw - 56vw) / 2);
                }
            }
        }
    }
    .person{
        width: 56vw;
    }
}

@media screen and (max-width:480px) {
    .color-circle{
        width:85%;
    }
    .person{
        width:65vw;
    }
    .index-swiper { 
        .swiper-slide {
            .slogan{
                width: 80%;transform: translate(-50%,-50%) scale(3);
            }
            &.scenes-item4 {  
                .txt{
                    margin-top: 20vw;height: 4.2em;
                }
            }
            &.scenes-item5{
                .txt{
                    left:calc(30vw / 2);
                }
            }
            &.scenes-item6 {  
                .txt{
                    width: 60%;height: 4.2em;
                }           
                .detail-con {
                    max-width:100%;
                    padding: 0 20px;
                    box-sizing: border-box;
                    text-align: justify; 
                    margin-bottom: 15%;             
                    p{
                        line-height: 1.5;
                    }
                }
            }
            &.scenes-item7{
                .inner-con {
                    width: 60vw;
                    margin-bottom:42vw;
                }
                .person{
                    right: calc((100vw - 65vw) / 2);
                }
            }
        }
    }
}